<template>
  <div
    v-if="btnShow"
    style="position: fixed; right: 50px; bottom: 50px; z-index: 2"
  >
    <el-button class="scaleBig" plain circle @click="backTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-huidaodingbu"></use>
      </svg>
    </el-button>
  </div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
  name: "Top",
  setup() {
    const btnShow = ref(false);
    let timer = null;
    onMounted(() => {
      window.addEventListener("scroll", scrollToTop);
    });
    function backTop() {
      timer = setInterval(function () {
        let backTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        let speedTop = backTop / 5;
        document.documentElement.scrollTop = backTop - speedTop;
        if (backTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    }
    function scrollToTop() {
      let pageLookHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scroll = document.documentElement.scrollTop;
      if (scroll >= pageLookHeight) {
        btnShow.value = true;
      } else {
        btnShow.value = false;
      }
    }
    return {
      top,
      btnShow,
      timer,
      backTop,
      scrollToTop,
    };
  },
};
</script>
<style scoped>
/*鼠标经过放大*/
.scaleBig {
  transition: transform 0.5s ease;
}
.scaleBig:hover {
  transform: scale(1.4);
}
</style>
